<template>
    <div>
        <el-select v-model="value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>


        <el-table
                ref="multipleTable"
                :data="repairs"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="报修编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairNum}}</template>
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="保修状态"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairState}}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="派单时间"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairNum}}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="接单时间"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairNum}}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="期待上门时间"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairNum}}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="处理人姓名"
                    width="120">
                <template slot-scope="scope">{{ scope.row.repairNum}}</template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="备注"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="查看详情">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">查看详情
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--        查看详细对话框-->
        <el-dialog
                title="报修详细信息"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">


            <el-form :inline="true" :model="repair" class="demo-form-inline">

                <el-col :span="12">
                    <el-form-item label="报修编号">
                        <el-input v-model="repair.repairId" placeholder="报修编号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="保修状态">
                        <el-input v-model="repair.repairState" placeholder="保修状态"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Repair",
        data() {
            return {
                repair: {
                    repairId: -1,
                    repairNum: "",
                    repairState: "",
                    assignmentTime: "",
                    receivingOrdersTime: "",
                    completeTime: "",
                    cancelTime: "",
                    doorTime: "",
                    assignmentId: -1,
                    completeId: "",
                    completePhone: "",
                    completeName: "",
                    remark: "",
                    createBy: "",
                    createTime: "",
                    updateBy: "",
                    updateTime: "",
                    userId: "",
                    delFlag: "",
                    repairContent: "",
                    communityId: -1,
                    address: ""
                },
                dialogVisible: false,
                repairs: [],//表格数据
                multipleSelection: [],
                options: [{
                    value: '选项2',
                    label: '恒大城三期'
                },
                    {
                        value: '选项1',
                        label: '恒大城二期'
                    }],
                value: '选项2'
            }

        },
        methods: {
            loadZyRepairs() {
                //首先分页查询
                this.axios.get("http://localhost:8080/zyRepair")
                    .then(res => {
                        console.log("loadZyRepairs()" + res);
                        if (res.data.status === "OK") {
                            this.repairs = res.data.data;
                        }
                    })
            },

            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {//全选
                this.multipleSelection = val;
            },
            handleEdit(index, row) {//查看详情
                console.log("12332321232" + index, row);
                this.dialogVisible = true;
                this.repair = JSON.parse(JSON.stringify(row));

                this.axios.get("http://localhost:8080/zyRepair/Repair-id/"+this.repair)
                    .then(res => {
                        if(res.data.status === "OK"){
                            this.repair.roles = res.data.data;
                            console.log(this.repair.roles);
                            //在所有角色中选中用户的角色
                            this.$refs.tree.setCheckedNodes(this.repair.roles);
                        }
                    });
            },
            handleClose(done) {//意外关闭
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
        , created() {
            this.loadZyRepairs();
        }
    }
</script>

<style scoped>

</style>
